<template>
    <div class="load-ing">
        <span class="load-ing-item"></span>
        <span class="load-ing-item"></span>
        <span class="load-ing-item"></span>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less"> 
.load-ing{
    display: flex;
    align-items: center;
    .load-ing-item{
        width: 10px;
        height: 10px;
        background-color: #656877;
        border-radius: 50%;
        margin: 2px 4px;
        animation: loadIng 0.5s ease-in-out infinite;
    }
    .load-ing-item:nth-child(2){
        animation-delay: 0.2s;
    }
    .load-ing-item:nth-child(3){
        animation-delay: 0.4s;
    }
    @keyframes loadIng {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-5px);
        }
        100% {
            transform: translateY(0);
        }
    }
}   
</style>